<template>
  <a-card :bordered="false">
    <a-row :gutter="16">
      <a-col :span="8">
        <a-card title="Partition Filter">
          <!-- table区域-begin -->
          <div>
            <div style="margin-bottom: 16px;">
              <a-button type="primary" @click="seekAllToBeginning">
                <a-icon type="left"/>
                Seek All to Beginning
              </a-button>
              <a-button type="primary" @click="seekAllToEnd" style="margin-left: 5px;">
                Seek All to End
                <a-icon type="right"/>
              </a-button>
            </div>

            <div style="margin-bottom: 16px;">
              <a-button type="primary" @click="enableSeekAll">
                Enable All
              </a-button>
              <a-button type="primary" style="margin-left: 5px;" @click="disableSeekAll">
                Disable All
              </a-button>
            </div>

            <div style="margin-bottom: 16px;">
              Records Per Partition
              <a-input-number
                v-decorator="['input-number', { initialValue: 3 }]"
                :min="1"
                :max="100"
                v-model="recordsPerPartition"
              />
            </div>
            <div style="margin-bottom: 16px;">
              <a-date-picker
                style="width: 180px"
                v-model="seekDate"
                v-decorator="['date-time-picker', dateConfig]"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />

              <a-input style="width: 125px" v-model="seekTimestamp"/>

              <a-button type="primary" style="margin-left: 5px;" @click="searchOffset">
                Search Offset
              </a-button>
            </div>

            <a-table
              ref="table"
              bordered
              size="middle"
              :columns="columns"
              rowKey="partition"
              :dataSource="dataSource"
              :pagination="false"
              :loading="loadingPartitions"
            >
              <span slot="offsetRangeColumn" slot-scope="text, record">
                <a-button type="primary" size="small" @click="seekToBeginning(record)">{{record.startOffset}}</a-button>
                ~
                <a-button type="primary" size="small" @click="seekToEnd(record)">{{record.endOffset}}</a-button>
              </span>
              <span slot="seekOffsetColumn" slot-scope="text, record">
                <a-input-number :min="record.startOffset" :max="record.endOffset" v-model="record.seekOffset"/>
              </span>
              <span slot="enableColumn" slot-scope="text, record">
                <a-switch defaultChecked v-model="record.seekEnable">
                  <a-icon type="check" slot="checkedChildren"/>
                  <a-icon type="close" slot="unCheckedChildren"/>
                </a-switch>
              </span>
            </a-table>
          </div>
          <!-- table区域-end -->
        </a-card>
      </a-col>
      <a-col :span="16">
        <a-card title="Partition Information">
          <a-button type="primary" @click="seekTopicMessages">
            Seek Messages
          </a-button>
        </a-card>
      </a-col>

    </a-row>

  </a-card>
</template>

<script>
  import moment from 'moment';
  import kafkamanagerApi from '@/api/kafkamanager'
  import ClusterModal from './modules/ClusterModal'

  export default {
    name: 'topic-message',
    components: {
      ClusterModal,
    },
    data() {
      return {
        loading: false,
        loadingPartitions: false,
        clusterCode: '',
        topicName: '',
        dateConfig: {
          rules: [{type: 'object', required: true, message: 'Please select time!'}],
        },
        seekDate: moment(),
        seekTimestamp: moment().valueOf(),
        recordsPerPartition: 10,
        topic: {},
        dataSource: [],
        columns: [{
          title: 'Partition',
          dataIndex: 'partition',
        }, {
          title: 'Offset Range',
          scopedSlots: {customRender: 'offsetRangeColumn'},
        }, {
          title: 'Seek Offset',
          scopedSlots: {customRender: 'seekOffsetColumn'},
        }, {
          title: 'Enable',
          scopedSlots: {customRender: 'enableColumn'},
        }]
      }
    },
    mounted() {
      this.clusterCode = this.$route.params.clusterCode;
      this.topicName = this.$route.params.topicName;
      this.loadData()
    },
    methods: {
      seekTopicMessages() {
        const partitionOffsets = this.dataSource.map(partitionInfo => {
          let {seekOffset, seekEnable, partition} = partitionInfo;
          return {
            partition,
            seekOffset,
            seekEnable
          }
        })

        kafkamanagerApi.seekTopicMessages(this.clusterCode, this.topicName, {
          recordsPerPartition: this.recordsPerPartition,
          partitionOffsets
        }).then(res => {
          console.log('seekTopicMessages', res)
          this.dataSource = result;
        }).catch(err => {
          this.$message.error(err.message);
        }).finally(() => {
          this.loadingPartitions = false;
        })
      },
      searchOffset() {

      },
      seekToBeginning(partition) {
        partition.seekOffset = partition.startOffset;
      },
      seekToEnd(partition) {
        partition.seekOffset = partition.endOffset;
      },
      seekAllToBeginning() {
        this.dataSource.forEach(p => {
          p.seekOffset = p.startOffset;
        })
      },
      seekAllToEnd() {
        this.dataSource.forEach(p => {
          p.seekOffset = p.endOffset;
        })
      },
      enableSeekAll() {
        this.dataSource.forEach(p => {
          p.seekEnable = true;
        })
      },
      disableSeekAll() {
        this.dataSource.forEach(p => {
          p.seekEnable = false;
        })
      },
      loadTopic() {
        this.loading = true;
        kafkamanagerApi.getClusterTopic(this.clusterCode, this.topicName).then(res => {
          this.topic = res;
        }).catch(err => {
          this.$message.error(err.message);
        }).finally(() => {
          this.loading = false;
        })
      },
      loadPartitions() {
        this.loadingPartitions = true;
        kafkamanagerApi.listTopicPartitionSummaries(this.clusterCode, this.topicName).then(res => {
          const result = res.map(tps => {
            let {topicPartition, start, end} = tps;
            return {
              partition: topicPartition.partition,
              startOffset: start.offset,
              endOffset: end.offset,
              seekOffset: end.offset,
              seekEnable: true
            }
          })
          console.log('listTopicPartitionSummaries', result)
          this.dataSource = result;
        }).catch(err => {
          this.$message.error(err.message);
        }).finally(() => {
          this.loadingPartitions = false;
        })
      },
      loadData() {
        this.loadTopic();
        this.loadPartitions();
      },
    }
  }
</script>

<style scoped>
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-layout-content {
    margin: 12px 16px 0 !important;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .anty-img-wrap {
    height: 25px;
    position: relative;
  }

  .anty-img-wrap > img {
    max-height: 100%;
  }
</style>
